﻿<link href="/UI/css/components/components.min.css" rel="stylesheet" />
<template>
    <div>
        <table class="v-rating">
            <tbody>
                <tr>
                    <td class="vr-title">{{title}}</td>
                    <td>
                        <ul class="vr-rating" @mouseout="onleave">
                            <li v-for="r in range" @click="rating(r)" @mouseover="onhover(r)" :class="{rating:r<=(tmp_score>0?tmp_score:score),bad:tmp_score>0?(r<=tmp_score&&tmp_score<=min):(score<=min&&r<=score)}"><i class="soicon icon-star"></i></li>
                        </ul>
                    </td>
                    <td class="vr-score">
                        <span v-if="score==-1">请根据{{title}}的实际情况进行评分</span>
                        <span v-else>您的评分- {{score}}</span>
                    </td>
                </tr>
            </tbody>
        </table>
        <ul class="vr-tip">
            <li v-for="(r,idx) in range" class="Cnt-Item">
                <span class="title">{{r}}分 - </span>
                {{(desc[idx]||'-').replace(/@/g,'，')}}
            </li>
        </ul>
    </div>
</template>
<script>
    vm = {
        mounted:function(){
            var tipr = new LiberUI.PopPanel($(this.$el).children(".vr-tip"))
                                  .option("Position", "left-up")
                                  .option("AutoWidth",false)
                                  .PopFor($(this.$el).find(".vr-rating"));
        },
        props: {
            min: {
                type: Number,
                default:1
            },
            max: {
                type: Number,
                default:5
            },
            title: {
                type: String,
                default:'您的评分'
            },
            desc:{
                type:Array,
                default:[]
            },
            item: {
                type: Object,
                default: {}
            }
        },
        data:function(){
            var d = {
                range: [],
                score: -1,
                tmp_score:-1
            };
            for (var i = 1; i <= this.max; i++) {
                d.range.push(i);
            };
            return d;
        },
        watch: {
            
        },
        methods: {
            onleave:function(){
                this.tmp_score = -1;
            },
            onhover:function(r){
                this.tmp_score = r;
            },
            rating: function (r) {
                this.score = r;
                this.item.rating=r;
                this.$emit('ratinged',this.item);
            }
        }
    }
</script>